<template>
  <div/>
</template>
<script>
  import Vditor from 'vditor'
  import 'vditor/src/assets/scss/index.scss'

  export default {
    name: 'MarkdownEditor',
    props: {
      users: {
        type: Array,
        require: false,
        default: () => ([])
      },
      mode: {
        type: String,
        require: false,
        default: 'wysiwyg'
      },
      toolbar: {
        type: Array,
        require: false,
        // 默认值依据：https://github.com/Vanessa219/vditor/blob/master/src/ts/util/Options.ts
        default: () => [
          'emoji', 'headings', 'bold', 'italic', 'strike', 'link',
          '|',
          'list', 'ordered-list', 'check', 'outdent', 'indent',
          '|',
          'quote', 'line', 'code', 'inline-code', 'insert-before', 'insert-after',
          '|',
          'upload', 'table',
          '|',
          'undo', 'redo',
          '|',
          'fullscreen', 'edit-mode',
          {
            name: 'more',
            toolbar: [
              'both', 'export', 'outline', 'preview'
            ]
          }
        ]
      },
      toolbarConfig: {
        type: Object,
        require: false
      },
      enableOutline: {
        type: Boolean,
        require: false,
        default: false
      },
      resize: {
        type: Object,
        require: false,
        default: () => ({
          enable: false,
          position: 'bottom'
        })
      },
      minHeight: {
        type: Number,
        require: false,
        default: 600
      }
    },
    data() {
      return {
        editorInstance: null
      }
    },
    beforeDestroy() {
      // eslint-disable-next-line no-unused-expressions
      this.editorInstance && this.editorInstance.destroy()
    },
    mounted() {
      this.initVditor()
    },
    methods: {
      uploadSuccess(data) {
      },
      initVditor() {
        const toolbarConfig = this.toolbarConfig ? this.toolbarConfig : {
          // pin: true
        }
        this.editorInstance = new Vditor(this.$el, {
          height: 'auto',
          minHeight: this.minHeight,
          mode: this.mode,
          toolbar: this.toolbar,
          toolbarConfig,
          cache: {
            enable: false
          },
          markdown: {
            toc: true,
            paragraphBeginningSpace: true,
            mark: true
          },
          preview: {
            actions: ['desktop']
          },
          resize: this.resize,
          after: () => {
            this.$emit('after', this.editorInstance)
          },
          outline: {
            enable: this.enableOutline,
            position: 'left'
          }
        })
      }
    }
  }
</script>
